@charset "utf-8";
*{
	padding: 0;
	margin: 0;
	text-decoration: none;
	list-style: none;
	font-family: 微软雅黑,sans-serif;
	color: #9a9898;
	font-size: 14px;
}
/* 网页头部：设置宽 100%  高 47px   边框  */
header{
	width:80%%;
	height: 47px;
	bo rder: 1px solid red;
	background-color: #333;

}
/* 网页中控：显示主题内容，占主体、页尾中控 ，水平居中*/
div#wrapper{
	width: 1531px;
	height: 47px;/* 考虑：主体、页尾占宽度+高度 */
	backgrou nd-color: #aaffff;
	/* 居中 */
	margin: 0 auto;
}
/* 网页中控区：左 */
div#wrapper div.left{
	width: 790px;
	height: 47px;
	back ground-color: #00ffff;
	float: left;
}
/* 3.1左侧部分布局li 导航数据：布局：浮动 设置高 */
div#wrapper div.left ul li{
	bor der: 1px solid red;
	float: left;
	li ne-height: 47px;
}
/* 3.2左侧部分 li a 垂直居中 左右有空间*/
div#wrapper div.left ul li a{
	border-right: 1px solid #424242;
	line-height: 47px;
	padding: 0 6px;
}
/* 3.3 左侧部分 最后一个边*/
div#wrapper div.left ul li a.fix{
	border: none;
}







/* 4.网页中控区：右 */
div#wrapper div.right{
	width: 265px;
	height: 47px;
	back ground-color: #aaff7f;
	float: right;
}
/* 4.1右侧浮动 */
div#wrapper div.right ul li{
	bo rder: 1px solid red;
	float: right;
	lin e-height: 47px;
}
/* 购物车区域背景图 */
div#wrapper div.right ul li.ul_right{
	background-color: #424242;
	width: 137px;
}
/* 4.2购物车的精灵图 */
div#wrapper div.right ul li i.shop{
	bord er: 1px solid red;
	padding: 0 10px;
	background: url(../img/buy.png) no-repeat;
    position: relative;
	top: 2px;
} 
/* 购物车悬停效果 三个地方改变 背景改
                            背景改同时改超链接
                            背景改同时改精灵图 
											*/
div#wrapper div.right ul li.ul_right:hover{
	background-color: #fff;
}
div#wrapper div.right ul li.ul_right:hover a{
	color: #ffaa00;
}
div#wrapper div.right ul li.ul_right:hover i.shop{
	background: url(../img/buy01.png) no-repeat;
	
}
div#wrapper div.right ul li a{
	border-right: 1px solid #424242;
	line-height: 47px;
	padding: 0 8px;
}
div#wrapper div.right ul li a.car{
	border: none;
	
}
/* 结束  添加悬停 颜色改成白色 */
div#wrapper div.left ul li a:hover,div#wrapper div.right ul li a:hover{
	color: #fff;
}
	
